<ng-template #dialogTpl>
  <div class="x-dialog" [@x-move-box-animation]="placement" (@x-move-box-animation.done)="moveDone($event)">
    <x-alert
      [draggable]="draggable"
      [dragBoundary]="'.cdk-overlay-container'"
      (close)="onClose()"
      [title]="title"
      [content]="contentTpl"
      [type]="type"
      [effect]="effect"
      [hideClose]="hideClose"
      [closeText]="closeText"
      showIcon="false"
      duration="0"
      manual
      disabledAnimation
    ></x-alert>
  </div>
</ng-template>

<ng-template #contentTpl>
  <div class="x-dialog-inner">
    <div class="x-dialog-content">
      <ng-content></ng-content>
    </div>
    <div class="x-dialog-buttons" [class.x-dialog-buttons-center]="buttonsCenter">
      <ng-container *xOutlet="footer">
        <x-buttons space="1" *ngIf="showCancel || showConfirm">
          <x-button *ngIf="showCancel" (click)="onCancel()">{{ getCancelText }}</x-button>
          <x-button *ngIf="showConfirm" type="primary" (click)="onConfirm()">{{ getConfirmText }}</x-button>
        </x-buttons>
      </ng-container>
    </div>
  </div>
</ng-template>
